<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GTA VI</title>
  <style>
    :root {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      background-color: #000;
    }

    .title {
      --d: 0s;
      position: fixed;
      inset: 0;
      margin: 0;
      background-image: url(./heroKeyArt2580.webp);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-size: 1000vh;
      line-height: 0.8;
      color: transparent;
      background-clip: text;
      animation: move ease-out forwards 1s paused;
      animation-delay: var(--d);
      font-weight: bold;
    }

    @keyframes move {
      from {
        color: transparent;
        font-size: 1000vh;
      }

      to {
        color: white;
        font-size: 10vh;
      }
    }

    .text-container {
      display: flex;
      flex-direction: column;
    }

    .container {
      height: 300vh;
    }
  </style>
</head>

<body>
  <div class="background-image"></div>
  <h1 class="title">
    <div class="text-container">
      <span>grand</span>
      <span style="margin-left: 0.6em;">theft</span>
      <span style="margin-left: 0.5em;">auto</span>
    </div>
  </h1>
  <div class="container"></div>
  <script>
    const title = document.querySelector('.title')

    window.addEventListener('scroll', () => {
      title.style.setProperty('--d', -(scrollY / (innerHeight * 2)) + 's')
    })
  </script>
</body>

</html>